<template>
  <view>
    <view class="history-list-container">
      <view v-for="(item, index) in historyList" :key="index" class="history-list-item" @click="toAction(item)">
        <view class="commodity-pic">
          <b-image :need-clip="false" width="166" height="166" :src="item.image" mode="aspectFill" />
        </view>
        <view class="commodity-intro">
          <view v-if="item.contentList" class="title">
            <view v-for="(t, p) in item.contentList" :key="p" class="article-line">{{ t }}</view>
          </view>
          <view v-else class="title" v-text="item.title"></view>
          <view class="line">
            <view class="type">{{ getViewType(item.view_type) }}</view>
            <view class="time">{{ item.time_desc }}</view>
          </view>
        </view>
      </view>
    </view>
    <base-list-state :list-length="listLength" :list-query="{page_no: listQuery.pageNo, page_size: listQuery.pageSize}" :list-state="listState" :list-empty="listEmpty" />

  </view>
</template>
<script>
import { toGoods } from '@/utils/navigateTo'
import { navigateToMiniProgram } from '@/utils/navigateTo'
export default {
  components: {
  },
  props: {
  },
  data() {
    return {
      listQuery: {
        pageSize: 10,
        pageNo: 1
      },
      listState: {
        loading: true,
        more: true
      },
      listEmpty: { type: 'empty_list', text: '暂无数据' },
      // view_type: ~ 自营商品、2 ~ 素材圈、3~ 直播、4~碧划算、5~箱起
      historyList: []
    }
  },
  computed: {
    listLength() { // 由于微信小程序无法自动更新base-list-state组件,故采用computed
      return this.historyList.length
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.listQuery = {
        pageSize: 10,
        pageNo: 1
      }
      this.listState.loading = false
      this.listState.more = true
      this.historyList = []
      this._getRecommend()
    },
    async _getRecommend() {
      if (this.listState.loading || !this.listState.more) return
      this.listState.loading = true
      const res = await this.$api.materialApi.getViewHistory(this.listQuery)
      if (res.success) {
        if (this.listQuery.pageNo === 1) {
          this.historyList = []
        }
        if (res.data && res.data.length < this.listQuery.pageSize) {
          this.listState.more = false
        }
        res.data.map(item => {
          if (item.title) {
            item.contentList = item.title.split('\n')
          }
        })
        this.historyList = this.historyList.concat(res.data)
      }
      this.listState.loading = false
      this.$emit('getCommendData', this.historyList.length > 0)
    },
    loadMore() {
      if (this.listState.loading || !this.listState.more) return
      this.listQuery.pageNo++
      this._getRecommend()
    },
    toAction(item) {
      if (!item || !item.view_id) return
      switch (item.view_type) {
        case 1:
          if (!item.goods_info_d_t_o) break
          var tempGoods = {
            id: item.goods_info_d_t_o.goodsId,
            from_type: item.goods_info_d_t_o.fromType,
            activity_id: item.goods_info_d_t_o.activityId,
            goods_id: item.goods_info_d_t_o.goodsId,
            goods_type: item.goods_info_d_t_o.goodsType,
            pack_type: item.goods_info_d_t_o.packType
          }
          // tempGoods
          toGoods(tempGoods)
          break
        case 2:
          this.$navigateTo('/pagesMaterial/detail/index?id=' + item.view_id)
          break
        case 3:
          navigateToMiniProgram({
            extraData: {
              toPath: `/pagesDetail/living-room/index?roundId=${item.view_id}`,
              platform: 'minProgram-bx'
            },
            success: () => {
              this.$store.dispatch('setExtraData', null)
            },
            fail: (err) => {
              console.log(err)
            }
          })
          break
        case 4:
          // text = '碧划算'
          if (!item.goods_info_d_t_o) break
          this.$navigateTo(`/pagesBHS/goods/index?goodsId=${item.goods_info_d_t_o.goodsId}&platform=${item.goods_info_d_t_o.plateform}`)
          break
        case 5:
          if (!item.goods_info_d_t_o) break
          if (item.goods_info_d_t_o.bonusGiftId) {
            this.$navigateTo(`/pagesDetail/commodity/index?bonus_gift_id=${item.goods_info_d_t_o.bonusGiftId}&type=boxGoods`)
          } else {
            this.$navigateTo(`/pagesDetail/commodity/index?from_type=${item.goods_info_d_t_o.fromType}&box_id=${item.goods_info_d_t_o.goodsId}&series_id=${item.goods_info_d_t_o.seriesId}&type=boxGoods`)
          }
          // text = '箱起'
          break
        default:
          break
      }
    },
    getViewType(type) {
      let text = ''
      switch (type) {
        case 1:
        case 4:
        case 5:
          text = '商品'
          break
        case 2:
          text = '素材圈'
          break
        case 3:
          text = '直播'
          break
        // case 4:
        //   text = '碧划算'
        //   break
        // case 5:
        //   text = '箱起'
        //   break
        default:
          break
      }
      return text
    }
  }
}
</script>
<style lang="scss">
.history-list-container{
  background-color: #fff;
  padding: 20rpx;
  .history-list-item{
    display: flex;
    margin-bottom: 20rpx;
    .commodity-pic{
      flex: 0 0 166rpx;
      width: 166rpx;
      image{
        width: 166rpx;
        height: 166rpx;
      }
    }
    .commodity-intro{
      flex: 1;
      margin-left: 25rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .title{
        width: 100%;
        height: 40px;
        margin-bottom: 20px;
        line-height: 20px;
        overflow: hidden;
        @include text-ellipsis-line(2);
        .article-line{
          display: block;
          line-height: 20px;
          min-height: 20px;
        }
      }
      .line{
        color: #999;
        display: flex;
        width: 100%;
        justify-content: space-between;
        .type{
          font-size: 28rpx;
        }
        .time{
          font-size: 24rpx;
        }
      }
    }
  }
}
.loading-tip {
  text-align: center;
  color: #666;
  font-size: 24rpx;
  padding: 20rpx  0;
}
</style>
